{% extends 'base.html' %}
{% load static %}
{% block title %}界面{% endblock %}
{% block css %}
<link href="{% static 'login.css' %}" rel="stylesheet" />
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        margin-top: 60px;
        padding: 0;
        color: #333;
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        margin-top : 60px;
        padding: 20px;
        background-color: #f9f9f9;
    }

    h1 {
        font-size: 24px;
        color: #555;
        margin-bottom: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e1e1e1;
    }

    a {
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: #0099ff;
    }


        .sidebar a {
            color: #fff;
            text-decoration: none;
            margin: 15px 0;
            font-size: 18px;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            transition: background 0.3s;
        }

        .sidebar a:hover {
            background-color: #575757;
        }

        .content {
            margin-left: 250px;
            padding: 20px;
            width: calc(100% - 250px);
        }


        .card {
            background-color: white;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
        }

        #performance {
        display: flex;
    }

    #chart1, #chart2 {
        flex: 1;
        height: 100%;
    }
</style>
{% endblock %}

{% block content %}

{#<div class="container">#}
{#    <h1 style="text-align: center">智能运维管理系统--系统管理员</h1>#}
{##}
{#    <a href="../manage"><p style="text-align: center">数据库管理</p></a>#}
{#    <a href="../control"><p style="text-align: center">智能化力度调整</p></a>#}
{##}
{##}
{##}
{#</div>#}

    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 180px; position: fixed; height: 100%; overflow-y: auto;background-color: #ffffff;">
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="../manage" class="nav-link active" aria-current="page">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
          数据库管理
        </a>
      </li>
      <li>
        <a href="../control" class="nav-link link-dark">
          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
          智能化力度调整
        </a>
      </li>

    </ul>
    <hr>
</div>

    <div class="content">
        <div class="header">
            <h1>智能运维管理系统--系统管理员</h1>
        </div>

        <div class="card">
            <h2>概览</h2>
            <h3>当前时间：<span id="current-time"></span></h3>
            <p>系统状态：<span style="color: green;">正常运行</span></p>
            <p>在线用户：<span style="font-weight: bold;">128</span></p>
            <p>今日处理任务：<span style="font-weight: bold;">56</span></p>
            <p>系统报警：<span style="color: red;">0</span></p>
        </div>

        <div class="card">
            <h2>最新活动</h2>
            <ul class="activity">
                <li><span id="time1"></span>: 数据库备份完成</li>
                <li><span id="time2"></span>: 系统报警：服务器 <strong>Server01</strong> CPU 使用率过高</li>
                <li><span id="time3"></span>: 用户 <strong>123456</strong> 更新了系统设置</li>
                <li><span id="time4"></span>: 智能化调整任务 <strong>调整运行功率</strong> 执行成功</li>
            </ul>
        </div>

        <div class="card">
            <h2>统计数据</h2>
            <div id="performance" style="width: 100%; height: 500px">
                <div id="chart1" style="flex: 1; height: 100%;"></div>
                <div id="chart2" style="flex: 1; height: 100%;"></div>
        </div>
    </div>

    <script>
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleString();
        document.getElementById('current-time').textContent = timeString;
    }
    const now = new Date();
    const t1 = now - 12*60*1000;
    const t2 = t1 - 3*58*1000;
    const t3 = t2 - 5*59*1000;
    const t4 = t3 - 2*72*1000;

    const str1 = new Date(t1).toLocaleString();
    const str2 = new Date(t2).toLocaleString();
    const str3 = new Date(t3).toLocaleString();
    const str4 = new Date(t4).toLocaleString();

    document.getElementById('time1').textContent = str1;
    document.getElementById('time2').textContent = str2;
    document.getElementById('time3').textContent = str3;
    document.getElementById('time4').textContent = str4;

    setInterval(updateTime, 1000);
</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.js"></script>
<script>

    const memory = performance.memory;
    console.log(`Total JS Heap Size: ${memory.totalJSHeapSize}`);
    console.log(`Used JS Heap Size: ${memory.usedJSHeapSize}`);
    console.log(`JS Heap Size Limit: ${memory.jsHeapSizeLimit}`);

var chartDom = document.getElementById('chart1');
var myChart = echarts.init(chartDom);
var option;

var gaugeData = [
  {
    value: 20,
    name: 'CPU占用率',
    title: {
      offsetCenter: ['0%', '-30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-20%']
    }
  },
  {
    value: 40,
    name: '内存占用率',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  },
  {
    value: 60,
    name: '带宽占用率',
    title: {
      offsetCenter: ['0%', '30%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '40%']
    }
  }
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#464646'
        }
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'inherit',
        borderColor: 'inherit',
        borderRadius: 20,
        borderWidth: 1,
        formatter: '{value}%'
      }
    }
  ]
};

var rdm_cpu = []
var rdm_memory = []
var rdm_bandwidth = []
var time_x = []
for(var i = 0; i < 200; i++){
    rdm_cpu.push(Math.floor(Math.random() * 10)+30);
    rdm_memory.push(Math.floor(Math.random() * 10) +40);
    rdm_bandwidth.push(Math.floor(Math.random() * 10) +50);
    var date = new Date();
    date = new Date(date - i * 2000);
    time_x.push(date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
}

var chartDom2 = document.getElementById('chart2');
var myChart2 = echarts.init(chartDom2);
var option2 = {
  title: {
    text: '时序数据'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['CPU占用率', '内存占用率', '带宽占用率']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: time_x
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'CPU占用率',
      type: 'line',
      data: rdm_cpu
    },
    {
      name: '内存占用率',
      type: 'line',
      data: rdm_memory
    },
    {
      name: '带宽占用率',
      type: 'line',
      data: rdm_bandwidth
    }
  ]
};
setInterval(function () {
  let cpu = +(Math.random() * 10).toFixed(2) + 30;
  let memory = +(Math.random() * 10).toFixed(2) + 50;
  let bandwidth = +(Math.random() * 10).toFixed(2) + 40;
  gaugeData[0].value = cpu;
  gaugeData[1].value = memory;
  gaugeData[2].value = bandwidth;
  myChart.setOption({
    series: [
      {
        data: gaugeData,
        pointer: {
          show: false
        }
      }
    ]
  });

    rdm_cpu.shift();
    rdm_cpu.push(cpu);
    rdm_memory.shift();
    rdm_memory.push(memory);
    rdm_bandwidth.shift();
    rdm_bandwidth.push(bandwidth);
    var date = new Date();
    time_x.shift();
    time_x.push(date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
    myChart2.setOption({
        xAxis: {
            data: time_x
        },
        series: [
            {
                name: 'CPU占用率',
                data: rdm_cpu
            },
            {
                name: '内存占用率',
                data: rdm_memory
            },
            {
                name: '带宽占用率',
                data: rdm_bandwidth
            }
        ]
    });
}, 2000);

option && myChart.setOption(option);
option2 && myChart2.setOption(option2);
    </script>
{% endblock %}